Vue.component('app-tree-row', {
    props: ['treerow', 'rowheight'],
    data: function () {
        return {
            isReady: 0
        }
    },
    template: '<li>\
                <div class="tree-row" :style="{\'height\': rowheight + \'px\',\'line-height\': rowheight + \'px\'}" @click="clickNode($event)">\
                <van-icon name="arrow" :class="treerow.isClose?\'\':\'tran\'" v-if="treerow.node && treerow.node.length"></van-icon>\
                <van-icon name="wap-nav" v-if="!treerow.node || !treerow.node.length"></van-icon>\
                <span>{{treerow.label}}</span>\
                </div>\
                <div class="tree-node" v-if="treerow.node && treerow.node.length">\
                <ul :style="{\'height\': getNodeHeight()}">\
                <app-tree-row v-for="item in treerow.node" :treerow="item" :rowheight="rowheight" @tree-click="clickTree"></app-tree-row>\
                </ul>\
                </div>\
                </li>',

    mounted: function () {
        var that = this;
    },
    methods: {
        getNodeHeight() {
            var that = this;
            if (that.treerow.isClose) {
                return 0;
            } else {
                var x = 0;
                var repeatNode = function(array){
                    for(var i in array){
                        x++;
                        if(!array[i].isClose){
                            if(array[i].node && array[i].node.length){
                                repeatNode(array[i].node);
                            }
                            
                        }
                    }
                }
                repeatNode(that.treerow.node);


                return x * that.rowheight + 'px';

            }
        },
        clickNode(e) {
            var that = this;
            if (that.treerow.node && that.treerow.node.length) {
                //收缩子节点
                if (!that.treerow.hasOwnProperty("isClose")) {
                    that.$set(that.treerow, 'isClose', true);
                } else {
                    that.treerow.isClose = !that.treerow.isClose;
                }

                $('.tree-row').removeClass('on');
                $(e.target).closest('li').children('.tree-row').addClass('on');
                that.$emit('tree-click', that.treerow,2);

            } else {
                $('.tree-row').removeClass('on');
                $(e.target).closest('li').children('.tree-row').addClass('on');
                that.$emit('tree-click', that.treerow,1);
            }
        },
        clickTree(row,index){
            var that = this;
            that.$emit('tree-click', row,index);
        }
    }
})

Vue.component('app-tree', {
    props: ['tree', 'rowheight'],
    template: '<div class="tree">\
                <ul>\
                <app-tree-row v-for="row in tree" :treerow="row" :rowheight="rowheight" @tree-click="clickTree" ></app-tree-row>\
                </ul>\
                </div > ',
    created: function () {
        var that = this;
    },
    methods: {
        clickTree(row,index){
            var that = this;
            that.$emit('tree-click', row,index);
            
            
        }
    }
})